<template>
  <div
    :class="{'store-signate-page-container': true, 'defaultHeight': !setTopShow}"
    :style="config.bgUrl !== '' ? setBackground : 'background: #fff'"
  >
    <div class="store-singate-content">
      <div
        v-if="setTopShow"
        class="store-top"
      >
        <div class="top-logo">
          <img
            v-show="config.showLogo === 0"
            :src="checkFileUrl(webHeaderConfig.pcLogoImgText)"
            alt=""
          >
        </div>
        <div class="top-search">
          <div
            v-show="config.showSearch === 0"
            class="search-box"
          >
            <div
              class="search-input"
            >
              <span>{{ $t(`pcdecorate.storeSignate.searchPlaceholder`) }}</span>
              <div class="search-types">
                <div class="types-name">
                  {{ $t('pcdecorate.shopMessage.goods') }}
                </div>
                <img
                  src="@/assets/img/pc-micro-page/togger_icon.png"
                  alt=""
                >
              </div>
              <div class="search-btns">
                {{ $t(`pcdecorate.storeSignate.search`) }}
              </div>
            </div>
            <div
              v-show="config.showHotWord === 0"
              class="hot-word"
            >
              <div class="con">
                <span
                  class="item"
                >热搜内容</span>
              </div>
            </div>
          </div>
          <div
            v-show="config.showSearch === 0"
            class="top-cart"
          >
            <span>{{ $t(`pcdecorate.storeSignate.cart`) }}(0)</span>
          </div>
        </div>
      </div>
      <div
        v-if="config.showNavs === 0"
        class="store-bottom"
      >
        <div
          v-if="config.showCategory === 0"
          class="all-category"
          :style="{background: config.showCategory === 0 ? 'rgba(25, 124, 224, 1)' : 'none'}"
        >
          <span>{{ $t(`pcdecorate.storeSignate.category`) }}</span>
          <img
            src="@/assets/img/pc-micro-page/pc-category_icon.png"
            alt=""
          >
        </div>
        <div
          v-show="config.showNavs === 0"
          :class="{'menu-content': true, 'isPadding': config.showCategory === 1}"
        >
          <template
            v-for="(item, index) in config.navList"
            :key="index"
          >
            <div

              class="menu-items"
            >
              {{ item.name }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  itemComponent: { // 组件的信息
    type: Object,
    default: () => {}
  },
  currentIndex: { // 下标
    type: [Number, String],
    default: 0
  },
  currentRefs: {
    type: String,
    default: () => ''
  }
})
const config = ref({})
const setBackground = computed(() => {
  return {
    background: `url(${config.value.bgUrl})`,
    'background-size': '100% 100%',
    'background-repeat': 'no-repeat'
  }
})
const setTopShow = computed(() => {
  let status = true
  const { showLogo, showSearch, bgUrl } = config.value
  status = !(showLogo !== 0 && showSearch !== 0 && bgUrl === '')
  return status
})
watch(() => props.itemComponent, (newVal) => {
  if (newVal && JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    config.value = { ...newVal.rightConfigMessage }
  } else {
    config.value = {
      showLogo: 0,
      showSearch: 0,
      showHotWord: 0,
      showCategory: 0,
      showNavs: 0,
      navList: [],
      bgUrl: ''
    }
  }
}, {
  immediate: true,
  deep: true
})
onMounted(() => {
  getHeader()
})

// 请求头部
const webHeaderConfig = ref({}) // 头部配置信息读取接口
const getHeader = () => {
  http({
    url: http.adornUrl('/sys/webConfig/info/PC_WEBSITE_CONFIG'),
    method: 'get'
  }).then(res => {
    const data = res.data
    data.pcLogoImgText = checkFileUrl(data.pcLogoImgText)
    webHeaderConfig.value = data
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
